@import "~taro-ui/dist/style/components/icon.scss";
@import "~taro-ui/dist/style/components/search-bar.scss";
@import "~taro-ui/dist/style/components/button.scss";
@import "~taro-ui/dist/style/components/flex.scss";
@import "~taro-ui/dist/style/components/loading.scss";
@import "~taro-ui/dist/style/components/tabs.scss";
// 倒计时
@import "~taro-ui/dist/style/components/countdown.scss";
// 模态框
@import "~taro-ui/dist/style/components/modal.scss";
//轻提示
@import "~taro-ui/dist/style/components/toast.scss";
@import "~taro-ui/dist/style/components/icon.scss";


page {
  padding: 0;
}
.index{
    margin: 0;
    Input::placeholder {
        color: red;
        // font-size: 1.5em;
      }
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 64rpx;
    font-weight: bold;
  
      Input{
          height: 150rpx;
          width: 100%;
          background-color: rgb(255, 80, 61);
          color: rgb(255, 255, 255);
          font-size: 50rpx;
          padding-left: 20rpx;
        //   text-indent:20rpx;
      }
      #headInput::placeholder {
        color: red;
        // font-size: 1.5em;
      }
  }
  
  .mid {
    display: flex;
    justify-content:space-around;
    margin-top: 50rpx;
    padding-bottom: 50rpx;
    border-bottom: solid rgb(230, 230, 230) 1rpx;
    height: 270rpx;
  
    .up {
      width: 30%;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
      .img_button {
        margin-top: 20px;
        width: 200px;
        height: 200px;
        line-height: 180px;
        font-size: 100px;
      }
    }
  }
  
  .but{
    padding: 0 6%;
    margin-bottom: 350rpx;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;

    Label{
      display: flex;
      background-color: rgb(242, 242, 242);
      padding-left: 10rpx;
      height: 100rpx;
      line-height: 100rpx;
      color: rgb(100, 100, 100);;
      text-align: center;
      font-size: 32rpx;
      // margin-right: 3%;
    }
    Input{
        background-color: rgb(242, 242, 242);
        // padding-left: 10rpx;
        height: 100rpx;
        font-size: 32rpx;
        color: black;
        font-weight: bolder;
        text-align: left;
        // margin-right: 3%;
    }

    Textarea{
        width: 100%;
        background-color: rgb(242, 242, 242);
        // padding-left: 10rpx;
        // height: 100rpx;
        font-size: 32rpx;
        text-align: left;
        // margin-top: 3%;
    }

   
    >view{
        margin-top: 30rpx;
        width: 100%;
        display: flex;
        >Input:last-child{
            margin-right: 0;
        }
    } 
    >view:first-child{
      // display: flex;
      justify-content:space-between;
      margin: 40rpx 0;
    }
    >view:nth-child(2){
      >Label:first-child{
        margin-right: 3%;
      }
      Input{
        width: 50%;
      }
  }
  >view:nth-child(3){
    display: flex;
    justify-content:space-around;
    font-size: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    >view{
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      width: 150rpx;
      background-color: rgb(242, 242, 242);
      margin-right: 3%;
    }
    >view:last-child{
      background-color: rgb(242, 242, 242);
      margin-right: 0;
    }
  }

    >view:nth-child(4),
    >view:nth-child(5),
    >view:nth-child(6),
    >view:nth-child(7),
    >view:nth-child(8){
        Label{
            width: 100%;
            // font-weight: bolder;
            // color: black;
        }
    }
    >view:nth-child(9){
      display: block;
      width: 100%;
      >View:first-child{
        width: 100%;
        // padding-left: 10rpx;
        // padding-right: -10rpx;
      }
      View{
        
        background-color: rgb(242, 242, 242);
        height: 100rpx;
        line-height: 100rpx;
        color: rgb(100, 100, 100);;
        font-size: 32rpx;
        width: 100%;
        display: block;
        text-align: left;
        
      }
    }

    >view:nth-child(6),
    >view:nth-child(7){
      font-size: 32rpx;
      display: flex;
      flex-wrap: wrap;
      >View{
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        justify-content:space-between;
      }
      Picker{
        width: 50%;
        font-size: 32rpx;
        >Input{
          width: 100%;
        }
      }
    }
  }

  .com-footer{
      display: flex;
      position: fixed;
      bottom: 0;
      width: 100%;
      color: white;
      text-align: center;
      height: 100px;
      line-height: 100px;
      overflow: hidden;
      >view:first-child{
        flex: 1;
        background-color: rgb(100, 100, 100);
      }
      >view:last-child{
        flex: 2;
        background-color: rgb(255, 80, 61);
      }
  }
  .red_state {
    background-color: rgb(255, 80, 61);
    color: white;
  }
  
  .gray_state {
    background-color: rgb(228, 228, 228);
    color: rgb(130, 130, 130);
  }

  Button{
    margin-bottom: 400rpx;
  }

  .AtModalAction{
    height: 80rpx;
    Button:last-child{
      color: red;
    }
  }
  .AtModalContent{
    height: 180rpx;
    line-height: 180rpx;
    text-align: center;
  }
  
  #last{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-bottom: 200rpx;
  }